<template>
  <div class="content-info">
    <div class="content-main">

      <div class="content-center">
        <div class="content-title">
          <div class="content-label">{{data.name}}</div>
          <div class="content-btn" @click="toggleSwitch()"><i class="icon-zhuanhuan"></i>切换</div>
        </div>

        <div class="content-text scrollbar">{{data.desc}}</div>
      </div>
      
    </div>

    <slot name="content-bottom"></slot>
  </div>
</template>
<script setup> 
  const emit = defineEmits(['toggleDropdown'])

  const props = defineProps({
    data: {
      type: Object,
      default: {}
    },
  })
  const toggleSwitch = ()=>{
    emit('toggleDropdown')
  }
</script>
<style lang="scss" scoped>
  .content-info{
    background: url('@/assets/images/cz_bg.png') no-repeat center top;
    background-size:100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 74px;
    .content-main{
      height: 423px;
      background: url('@/assets/images/cz_text_bg.png') no-repeat;
      margin-top: -36px;
      z-index: 20;
      @media (max-width: 1280px) {
        width: 1280px;
      }

      @media (min-width: 1280px) and (max-width: 1776px) {
        width: 100%;
      }

      @media (min-width: 1776px) {
        width: 1776px;
      }

      .content-center{
        width: 1280px;
        margin: 0 auto;
        .content-title{
          margin-top: 67px;
          display: flex;
          align-items: center;
          .content-label{
            font-weight: 500;
            font-size: 30px;
            color: #111111;
          }
          .content-btn{
            font-weight: 400;
            font-size: 18px;
            color: #B52628;
            margin-left: 16px;
            display: flex;
            align-items: center;
            cursor: pointer;
            .icon-zhuanhuan{
              display: block;
              width: 30px;
              height: 30px;
              background: url("@/assets/images/toggle_icon.png")
            }
          }
        }
      }

      .content-text{
        margin-top: 40px;
        font-weight: 400;
        font-size: 18px;
        color: #393329;
        line-height: 34px;
        height: 170px;
        overflow: auto;
        text-indent: 2em;
        padding-right: 20px;
      }

    }
  }
</style>